<template>
	<view class="customModal">
		<image src="../../static/img/close.png" mode="aspectFill" class="close" @click="beforeClose"></image>
		<view class="title">
			请选择型号区间
		</view>
		<view class="sec-wrapper">
			<view class="sec" v-for="(item,index) in types" :class="{checked: item.checked}" :key="item.id" @click="checkChange('types',index)">
				{{item.name}}
			</view>
		</view>
		<view class="title">
			选择组数
		</view>
		<view class="sec-wrapper">
			<view class="sec" v-for="(item,index) in groups" :class="{checked: item.checked}" :key="item.id" @click="checkChange('groups',index)">
				{{item.name}}
			</view>
		</view>
		<view class="title">
			单根定制长度
		</view>
		<view class="sec-wrapper num-box">
			<uni-number-box :min="1" :max="9999" @change="numChange"></uni-number-box>
		</view>
		<view class="foooter-next" @click="toNext">
			下一步
		</view>
		<view class="operation-modal" v-show="modalVisable">
			<view class="operation-dialog">
				<view class="operation-box">
					<view class="pic-box">
						<image class="pic-img" src="../../static/img/cart-img.png" mode="aspectFill"></image>
					</view>
					<view class="intro-box">
						<view class="intro-tit">
							A580进口高速防滑传动带
						</view>
						<view class="intro-cost">
							<text class="prefix">￥</text> 299.00
						</view>
						<view class="intro-desc">
							价格:3(元/米)*5(米)*6(连组数)
						</view>
						<image src="../../static/img/close.png" mode="aspectFill" class="intro-close" @click="close"></image>
					</view>
				</view>
				<view class="count-wrapper">
					<view class="count-label">
						请选择数量
					</view>
					<uni-number-box class="count-nums" :min="1" :max="9999" @change="numChange"></uni-number-box>
				</view>
				<operation-footer></operation-footer>
			</view>
		</view>
	</view>
	
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import operationFooter from "@/components/operation-footer/operation-footer.vue"
	import { types, groups } from '../../utils/data.js'
	export default {
		components: {uniNumberBox,operationFooter},
		data() {
			return {
				types,
				groups,
				modalVisable: false
			}
		},
		methods: {
			beforeClose() {
				this.$emit('beforeClose')
			},
			numChange() {
				
			},
			checkChange(type, i) {
				this.modalVisable = true
				this[type] = this[type].map((item,index) => {
					item.checked = i === index
					return item
				})
			},
			close() {
				this.modalVisable = false
			},
			toNext() {
				this.$emit('next')
			}
		}
	}
</script>

<style>
.customModal {
	padding:0 0 0 28upx;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 750upx;
	height: 967upx;
	background: #FFFFFF;
	z-index: 888;
}
.close {
	width: 28upx;
	height: 28upx;
	position: absolute;
	top: 35upx;
	right: 65upx;
}
.title {
	margin-top: 40upx;
	font-size:28upx;
	font-weight:500;
	color:rgba(34,34,34,1);
}
.sec {
	width:160upx;
	height:66upx;
	background:rgba(248,248,248,1);
	border-radius:4upx;
	margin: 28upx 18upx 0 0;
	text-align: center;
	line-height: 66upx;
	font-size: 24upx;
	color: #666666;
	display: inline-block;
}
.sec.checked {
	background: transparent url(../../static/img/checked_label.png) center ceter no-repeat;
	background-image: url(../../static/img/checked_label.png);
	background-size: contain;
	color: #FFFFFF;
}
.num-box {
	margin-top: 38upx;
}

</style>
